import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './labelmanage.css'
import { AtList, AtListItem,AtSwipeAction } from "taro-ui"
// import reactMixin from 'react-mixin';
// import myJs from './labelmanageJs.js'
import app from '../../../../main.js'

export default class LabelManage extends Component {

  config = {
    navigationBarTitleText: '患者标签管理'
  }
  constructor () { 
        super(...arguments); 
        this.state = {
          lables:{
            offset:0,
            length:25,
            items:[{
              id:'',
              name:'',
              is_selected:'',
              amount:''
            }]
          }
        };
  }

  allLabels(){
    let me = this;
    let data = {};

    app.get('web/patientlabel/many', data , (res)=>{
       let datas = [];
       res.data.result.list.map((item)=>{
           let m = {
               id:item.id,
               name:item.name,
               is_selected:item.is_selected,
               amount:item.amount
           }
           datas.push(m);
       })
        this.setState({
          lables:{items: datas}
        })
    })

  }

  editlabel(id,name){
    app.navigateTo(`../editlabel/editlabel?id=${id}&name=${name}`);
  }

  patientChoose(){
    app.navigateTo('../patientchoose/patientchoose');
  }

  deleteLabels(id,name){
    let me = this;
    let data = {
      label_id:id
    }
    Taro.showModal({
       title: '提示',
       content: `确认删除 ${name} 标签吗`,
    })
    .then((res)=>{
      if(res.confirm){
         app.post('web/patientlabel/delete', data, (res)=>{
             app.redirectTo('../labelmanage/labelmanage')
         })
      }
    })
  }

  componentDidShow () {
    this.allLabels();
  }

  // componentWillUnmount () {
  //   app.navigateTo('../suifangHuanzheLieBiao/suifangHuanzheLieBiao')
  //   // Taro.reLaunch({
  //   //     url:'../suifangHuanzheLieBiao/suifangHuanzheLieBiao'
  //   // })
  // }
 
  render () {
    
    const { lables } = this.state;

    const lablesBox = lables.items.map((item,index)=>{
      return <AtSwipeAction key={index} onClick={this.deleteLabels.bind(this,item.id,item.name)} options={[
                                                                                           {text: '删除',style: {backgroundColor: '#FF4949'}}
                                                                                        ]}>
                    <AtListItem arrow='right' title={item.name} extraText={String(item.amount)} onClick={this.editlabel.bind(this,item.id,item.name)}/>
            </AtSwipeAction>
    })

    return (
      <View className='lable-manage'>
        <AtList className='add-tag'>
          <AtListItem title='添加新标签' arrow='right' onClick={()=>app.navigateTo('../editlabel/editlabel?id=0&name=')} thumb={app.imageUri+'img/tianjiabingli.png'}/>
          {/* <AtListItem title='我的患者可选标签' arrow='right' onClick={()=>{this.patientChoose()}} thumb={app.imageUri+'img/touxiang.png'}/> */}
        </AtList>
        <AtList className='tags'>
          <AtListItem title='全部患者标签' disabled  className='gray-list'/>
          {lablesBox}
        </AtList>
      </View>
    )
  }
}
// reactMixin.onClass(LabelManage,myJs);
